<template>
  <header id="header" :class="headerClass">
    <nav class="navbar">
      <div class="container">
        <a class="navbar-brand" href="/">Besto</a>
        <!-- 展开按钮 -->
        <button
          class="offcanvas-open"
          type="button"
          data-bs-toggle="offcanvas"
          data-bs-target="#offcanvasNavbar"
          aria-controls="offcanvasNavbar"
        >
          <i class="fa fa-bars" aria-hidden="true"></i>
        </button>
        <div
          class="offcanvas offcanvas-bottom"
          tabindex="-1"
          id="offcanvasNavbar"
          aria-labelledby="offcanvasNavbarLabel"
        >
          <div class="offcanvas-header">
            <button
              type="button"
              class="offcanvas-close ms-auto"
              data-bs-dismiss="offcanvas"
              aria-label="Close"
              id="offcanvas-close"
            >
              <i class="fa fa-times" aria-hidden="true"></i>
            </button>
          </div>
          <div class="offcanvas-body">
            <ul class="navbar-nav justify-content-center align-items-center">
              <template v-for="(item, index) in menuData" :key="index">
                <template v-if="item.children">
                  <li class="nav-item dropdown" v-if="item.isShow">
                    <a
                      class="nav-link dropdown-toggle"
                      href="#"
                      id="navbarDropdown"
                      role="button"
                      data-bs-toggle="dropdown"
                      aria-expanded="false"
                    >
                      {{ item.title }}
                    </a>
                    <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
                      <template
                        v-for="(child, index) in item.children"
                        :key="index"
                      >
                        <li>
                          <a class="dropdown-item" @click="jumpLink(child.url)">
                            {{ child.title }}
                          </a>
                        </li>
                      </template>
                    </ul>
                  </li>
                </template>
                <template v-else>
                  <li class="nav-item" v-if="item.isShow">
                    <a class="nav-link" @click="jumpLink(item.url)">
                      {{ item.title }}
                    </a>
                  </li>
                </template>
              </template>
            </ul>
          </div>
        </div>
      </div>
    </nav>
  </header>
</template>

<script>
import {
  reactive,
  toRefs,
  onBeforeMount,
  onMounted,
  computed,
  getCurrentInstance,
  watch,
} from "vue";
import { useStore } from "vuex";
import BaseInfo from "@/datas/BaseInfo.json";

export default {
  name: "",
  components: {},
  props: {},
  setup() {
    const { proxy } = getCurrentInstance();
    const data = reactive({
      menuData: BaseInfo.menuData,
      //
      headerClass: "header fixed-top",
    });
    const refData = toRefs(data);
    onBeforeMount(() => {});
    onMounted(() => {
      document.addEventListener("scroll", function () {
        methods.onHeaderScolled();
      });
    });
    //
    const store = useStore();
    //
    const computedData = {
      lang: computed(() => store.state.i18n.language),
      //
    };
    //

    //
    const methods = {
      changeLanguage: function () {},
      changeLanguage1: () => {
        console.log("当前语言", store.state.i18n.language);
        var lang = computedData.lang.value == "zh" ? "en" : "zh";
        //切换语言
        proxy.$i18n.locale = lang;
        //保存切换语言
        store.dispatch("setAppLanguage", lang);
      },
      onHeaderScolled() {
        let selectHeader = document.getElementById("header");
        if (selectHeader) {
          if (window.scrollY > 100) {
            selectHeader.classList.add("header-scrolled");
            data.headerClass = selectHeader.classList.value;
          } else {
            selectHeader.classList.remove("header-scrolled");
            data.headerClass = selectHeader.classList.value;
          }
        }
      },
      jumpLink(url) {
        var offcanvasClose = document.getElementById("offcanvas-close");
        offcanvasClose.click();
        proxy.$router.push(url);
      },
    };
    //
    return {
      ...refData,
      //
      ...computedData,
      //
      ...methods,
    };
  },
};
</script>
<style lang="scss" scoped>
#header.header-scrolled {
  background: rgba(30, 67, 86, 0.8);
  height: 60px;
}

#header {
  background: rgba(30, 67, 86, 0.6);
  height: 80px;
  transition: all 0.5s;

  .navbar {
    // padding-top: 0.5rem;
    // padding-bottom: 0.5rem;

    .navbar-brand {
      font-size: 2rem;
      font-weight: 500;
      text-transform: uppercase;
      color: #fff;
    }

    button.offcanvas-open {
      width: 2.5rem;
      background: transparent;
      padding: 10px;
      border: none;

      i {
        color: #fff;
        font-size: 1.5rem;
      }
    }

    button.offcanvas-close {
      width: 2.5rem;
      background: transparent;
      padding: 10px;
      border: none;
      i {
        color: #fff;
        font-size: 1.5rem;
      }
    }

    .offcanvas {
      background-color: rgba(19, 110, 180, 0.8);
    }

    .offcanvas-bottom {
      height: 100vh;
    }

    ul.navbar-nav {
      li a {
        font-size: 2em;
        font-weight: 400;
        display: block;
        color: #fff;
        text-decoration: none;
        -webkit-transition: color 0.2s;
        transition: color 0.2s;
      }
    }

    .dropdown-menu {
      background-color: rgb(0, 0, 0, 0.2);
    }
  }
}
</style>
